<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>DIV+CSS布局教程</title>
    <style type="text/css">
        #Container {
            width: 1000px;
            margin: 0 auto; /*设置整个容器在浏览器中水平居中*/
            background: #CF3;
        }

        #Header {
            height: 80px;

            background: #093;
        }

        #logo {
            padding-left: 50px;
            padding-top: 20px;
            padding-bottom: 50px;
        }

        #Content {
            height: 600px;
            /*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/
            margin-top: 20px; /*此处讲解margin的用法，设置content与上面header元素之间的距离*/
            background: #0FF;

        }

        #Content-Left {
            height: 400px;
            width: 200px;
            margin: 20px; /*设置元素跟其他元素的距离为20像素*/
            float: left; /*设置浮动，实现多列效果，div+Css布局中很重要的*/
            background: #90C;
        }

        #Content-Main {
            height: 400px;
            width: 420px;
            margin: 20px; /*设置元素跟其他元素的距离为20像素*/
            float: left; /*设置浮动，实现多列效果，div+Css布局中很重要的*/
            background: #90C;
        }

        #Content-Right {
            height: 200px;
            width: 20px;
            float: left;
            background: #9900CC;

            margin-top: 30px;
        }

        /*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:left;设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/
        #Footer {
            height: 40px;
            background: #90C;
            margin-top: 20px;
        }

        .Clear {
            clear: both;
        }
    </style>
</head>

<body>

<div class="container"><h3 class="field regheader"></h3>
    <form method="post" class="regform" action="/findAndUpdatePwd"><p class="mess"></p>
        <div class="item"><label for="mailnumber" class="label">输入邮箱</label><input type="text" placeholder="输入邮箱"
                                                                                id="mailnumber" name="mailnumber"></div>
        <div class="item"><label for="password" class="label">验证码</label><input type="password" placeholder="用户密码"
                                                                                 id="password" name="password"></div>
        <div class="item"><label class="label"></label><input type="submit" id="sub" name="sub" value="确认"></div>
    </form>
    <hr>
</div>
</body>
</html>